<template>
    <a-card title="添加广告">
        <template #extra>
            <a-space>
                <a @click="submitForm">保存</a>
                <a @click="$router.push('/content/ad/list')">返回</a>
            </a-space>
        </template>
        <a-row>
            <a-col :span="12">
                <el-form :model="formData" ref="vForm" :rules="rules" label-position="right" label-width="120px"
                    size="large" @submit.prevent>
                    <el-form-item label="广告标题" prop="title" class="required label-right-align">
                        <el-input v-model="formData.title" type="text" placeholder="请输入广告标题" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="广告位" prop="cname" class="required label-right-align">
                        <el-cascader v-model="formData.cname" class="full-width-input" :options="cnameOptions" clearable
                            placeholder="请选择广告位"></el-cascader>
                    </el-form-item>
                    <el-form-item label="上传图片" prop="imageUrl" class="required label-right-align">
                        <a-upload name="file" list-type="picture-card" class="avatar-uploader" :show-upload-list="false"
                            action="/api/index/uploads" @change="handleChange">
                            <img v-if="formData.imageUrl" :src="'/api' + formData.imageUrl"
                                style="width:100%;height: 100%;" alt="图片错误" />
                            <div v-else>
                                <loading-outlined v-if="loading"></loading-outlined>
                                <plus-outlined v-else></plus-outlined>
                            </div>
                        </a-upload>
                    </el-form-item>
                    <el-form-item label="开始时间" prop="starttime" class="required label-right-align">
                        <a-date-picker show-time v-model:value="formData.starttime" class="full-width-input"
                            placeholder="请选择开始时间" clearable></a-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间" prop="deadline" class="label-right-align">
                        <a-date-picker show-time v-model:value="formData.deadline" class="full-width-input"
                            placeholder="请选择结束时间" clearable></a-date-picker>
                    </el-form-item>
                    <el-form-item label="排序" prop="sort_id" class="label-right-align">
                        <el-input v-model="formData.sort_id" type="text" placeholder="请输入排序" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="目标地址" prop="targetUrl" class="label-right-align">
                        <el-radio-group v-model="formData.targetUrl">
                            <el-radio v-for="(item, index) in targetUrlOptions" :key="index" :label="item.value"
                                style="{display: inline}">{{ item.label }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item v-if="formData.targetUrl === '自定义链接'" label="自定义跳转链接" prop="custom"
                        class="label-right-align">
                        <el-input v-model="formData.custom" type="text" placeholder="请输入自定义跳转链接" clearable></el-input>
                    </el-form-item>
                    <el-form-item v-if="formData.targetUrl === '站内跳转'" label="跳转站内链接" prop="custom1"
                        class="label-right-align">
                        <el-select v-model="formData.custom1" class="full-width-input" clearable
                            placeholder="请选择站内跳转链接">
                            <el-option v-for="(item, index) in custom1Options" :key="index" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="formData.targetUrl === '站内跳转'" label="站内链接参数" prop="custom1_params"
                        class="label-right-align">
                        <el-input v-model="formData.custom1_params" type="text" placeholder="如无参数请留空"
                            clearable></el-input>
                    </el-form-item>
                    <el-form-item v-if="formData.targetUrl === '绑定企业'" label="企业ID" prop="compony"
                        class="label-right-align">
                        <el-input v-model="formData.compony" type="text" placeholder="请输入企业ID" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="是否显示" prop="is_display" class="label-right-align">
                        <el-switch v-model="formData.is_display"></el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm">保存</el-button>
                        <el-button @click="$router.push('/content/ad/list')">返回</el-button>
                    </el-form-item>
                </el-form>
            </a-col>
        </a-row>
    </a-card>
</template>
<script setup lang="ts">
import {
    toRefs,
    reactive,
    getCurrentInstance,
    ref,
    onMounted
}
    from 'vue'
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import request from '@/request'
import { useRouter } from 'vue-router';
const router = useRouter()
const state = reactive({
    formData: {
        title: "",
        cname: "",
        imageUrl: null,
        starttime: "",
        deadline: null,
        sort_id: "0",
        targetUrl: "自定义链接",
        custom: "",
        custom1: "",
        custom1_params: "",
        compony: "",
        is_display: true,
    },
    rules: {
        title: [{
            required: true,
            message: '请输入广告标题',
        }],
        cname: [{
            required: true,
            message: '请选择广告位',
        }],
        imageUrl: [{
            required: true,
            message: '请上传广告图片',
        }],
        starttime: [{
            required: true,
            message: '请选择开始时间',
        }],
        sort_id: [{
            pattern: /^\d+(\.\d+)?$/,
            trigger: ['blur', 'change'],
            message: '请输入数字'
        }],
    },
    cnameOptions: [],
    targetUrlOptions: [{
        "label": "自定义链接",
        "value": "自定义链接"
    }, {
        "value": "站内跳转",
        "label": "站内跳转"
    }, {
        "value": "绑定企业",
        "label": "绑定企业"
    }],
    custom1Options: [{
        "label": "首页",
        "value": "首页"
    }, {
        "label": "职位列表页",
        "value": 2
    }, {
        "label": "简历列表页",
        "value": 3
    }],
    imageUrlFileList: [],
    imageUrlUploadHeaders: {},
    imageUrlUploadData: {},
})
const instance: any = getCurrentInstance()
const submitForm = () => {
    instance.ctx.$refs['vForm'].validate((valid: any) => {
        if (!valid) return
        //TODO: 提交表单
        let obj = {
            title: formData.value.title,
            cname: formData.value.cname[1],
            platform: formData.value.cname[0],
            imageUrl: formData.value.imageUrl,
            starttime: formData.value.starttime,
            deadline: formData.value.deadline,
            sort_id: formData.value.sort_id,
            targetUrl: formData.value.targetUrl,
            custom: formData.value.targetUrl === '自定义链接' ? formData.value.custom : formData.value.targetUrl === '站内跳转' ? formData.value.custom1 : formData.value.compony,
            is_display: formData.value.is_display,
        }
        request.post('ment', obj).then(({ data }) => {
            if (data.code !== 200) {
                return message.error('添加广告失败!')
            }
            message.success('添加广告成功!')
            router.push('/content/ad/list')
        })
    })
}
const resetForm = () => {
    instance.ctx.$refs['vForm'].resetFields()
}
const { formData, rules, cnameOptions, targetUrlOptions, custom1Options } = toRefs(state)
const loading = ref(false)
const handleChange = (info: any) => {
    if (info.file.status === 'uploading') {
        loading.value = true;
        return;
    }
    if (info.file.status === 'done') {
        formData.value.imageUrl = info.file.response.url;
        loading.value = false;
    }
    if (info.file.status === 'error') {
        loading.value = false;
        message.error('upload error');
    }
};
// 获取数据广告位
onMounted(() => {
    request.get('advert').then(({ data }) => {
        let arr = data.data.reduce((a: any, item: any) => {
            if (!a.includes(item.platform)) {
                a.push(item.platform)
            }
            return a
        }, [])
        cnameOptions.value = arr.map((item: any) => {
            let obj: any = { label: item, value: item, children: [] }
            data.data.forEach((item1: any) => {
                if (item1.platform === item) {
                    obj.children.push({ label: item1.name, value: item1.name })
                }
            })
            return obj
        })
    })
})
</script>
  
<style lang="scss">
.el-input-number.full-width-input,
.el-cascader.full-width-input,
.ant-calendar-picker.full-width-input {
    width: 100% !important;
}

.el-form-item--medium {
    .el-radio {
        line-height: 36px !important;
    }

    .el-rate {
        margin-top: 8px;
    }
}

.el-form-item--small {
    .el-radio {
        line-height: 32px !important;
    }

    .el-rate {
        margin-top: 6px;
    }
}

.el-form-item--mini {
    .el-radio {
        line-height: 28px !important;
    }

    .el-rate {
        margin-top: 4px;
    }
}

.clear-fix:before,
.clear-fix:after {
    display: table;
    content: "";
}

.clear-fix:after {
    clear: both;
}

.float-right {
    float: right;
}
</style>
  
<style lang="scss" scoped>
div.table-container {
    table.table-layout {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;

        td.table-cell {
            display: table-cell;
            height: 36px;
            border: 1px solid #e1e2e3;
        }
    }
}

.label-left-align :deep(.el-form-item__label) {
    text-align: left;
}

.label-center-align :deep(.el-form-item__label) {
    text-align: center;
}

.label-right-align :deep(.el-form-item__label) {
    text-align: right;
}

.static-content-item {
    min-height: 20px;
    display: flex;
    align-items: center;

    :deep(.el-divider--horizontal) {
        margin: 0;
    }
}
</style>